<template>
  <el-container>
    <el-header style="height: 100%">
      <div class="pd-10">
        <el-row :gutter="10">
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>总配置数</p>
                <p>{{ SysConfigCount }}</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>正常配置数</p>
                <p>{{ SysConfigNormalCount }}</p>
              </div>
            </a>
          </el-col>
        </el-row>
      </div>

      <div class="pd-10">
        <el-input style="width: 200px" suffix-icon="el-icon-edit" placeholder="请输入名称"
                  v-model="sysConfigName"></el-input>
        <el-button class="ml-5" icon="el-icon-search" type="primary" @click="load">搜 索</el-button>
        <el-button class="ml-5" icon="el-icon-edit" type="warning" @click="reset">重 置</el-button>
        <el-button class="ml-5" type="primary" icon="el-icon-circle-plus-outline" @click="openDialog('insert')">新 增
        </el-button>
      </div>
    </el-header>
    <el-main>
      <el-table :data="tableData" border stripe v-loading="loading" height="580">
        <el-table-column prop="sysConfigId" label="编号" width="80">
        </el-table-column>
        <el-table-column sortable prop="sysConfigName" label="名称" width="300">
        </el-table-column>
        <el-table-column sortable prop="sysConfigStatus" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sysConfigStatus==0">正 常</el-tag>
            <el-tag v-if="scope.row.sysConfigStatus==1" type="danger">已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column sortable prop="sysConfigContent" label="配置项">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="getSysConfigDetails(scope.row.sysConfigId)" type="text" size="small">编辑</el-button>
            <el-button style="color: #F56C6C" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="修改系统配置" :visible.sync="UpdateDialogFormVisible">
        <el-form :model="form">
          <el-form-item label="配置编号" :label-width="formLabelWidth">
            <el-input :disabled="true" placeholder="配置编号" v-model="form.sysConfigId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="配置名称" :label-width="formLabelWidth">
            <el-input placeholder="配置名称" v-model="form.sysConfigName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="`配置内容项${index}`" v-for="(item, index) in form.data" :key="index"
                        :label-width="formLabelWidth">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-input placeholder="配置内容名称" v-model="item.key" autocomplete="off"></el-input>
              </el-col>
              <el-col :span="8">
                <el-input placeholder="配置内容详情" v-model="item.value" autocomplete="off"></el-input>
              </el-col>
              <el-col :span="4">
                <i class="el-icon-delete" style="color:#409EFF;cursor: pointer;"
                   @click="deleteSysConfigItem(index)"></i>
              </el-col>
            </el-row>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addSysConfigItem">添加配置项</el-button>
          <el-button @click="UpdateDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateSysConfig">确 定</el-button>
        </div>
      </el-dialog>


      <el-dialog title="新增系统配置" :visible.sync="InsertDialogFormVisible">
        <el-form :model="form">
          <el-form-item label="配置名称" :label-width="formLabelWidth">
            <el-input placeholder="配置名称" v-model="form.sysConfigName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label="`配置内容项${index}`" v-for="(item, index) in form.data" :key="index"
                        :label-width="formLabelWidth">
            <el-row :gutter="10">
              <el-col :span="8">
                <el-tooltip class="item" effect="dark" content="longitude:经度  latitude:纬度" placement="top-start">
                  <el-input placeholder="配置内容名称" v-model="item.key" autocomplete="off"></el-input>
                </el-tooltip>
              </el-col>
              <el-col :span="8">
                <el-input placeholder="配置内容详情" v-model="item.value" autocomplete="off"></el-input>
              </el-col>
              <el-col :span="4">
                <i class="el-icon-delete" style="color:#409EFF;cursor: pointer;"
                   @click="deleteSysConfigItem(index)"></i>
              </el-col>
            </el-row>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addSysConfigItem">添加配置项</el-button>
          <el-button @click="InsertDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="insertSysConfig">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
    <el-footer>
      <div class="pd-10">
        <!--          current-page: 当前的页码
                      page-size: 每页的个数
        -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[20 ,40, 80, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>

  </el-container>
</template>

<script>
export default {
  name: "SysConfig",
  data() {
    return {
      loginStatus: true,
      loading: true,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      SysConfigCount: 0,
      SysConfigNormalCount: 0,
      sysConfigName: "",
      formLabelWidth: '120px',
      UpdateDialogFormVisible: false,
      InsertDialogFormVisible: false,
      form: {
        sysConfigId: '',
        sysConfigName: '',
        data: []
      },
    }
  },
  created() {
    this.load()
    this.FindSysConfigCount()
    this.FindSysConfigNormalCount()
  },
  methods: {
    load() {
      this.loading = true
      this.$axios({
        method: "get",
        url: this.$api.FindSysConfigPage,
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          sysConfigName: this.sysConfigName
        },
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.loading = false
      })
    },
    //修改每页的条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    //修改页码
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    //搜索重置
    reset() {
      this.sysConfigName = ""
      this.load()
    },
    //删除一个配置项
    deleteSysConfigItem(index) {
      this.form.data.splice(index, 1)
    },
    addSysConfigItem() {
      this.form.data.push({"key": '', "value": ''})
    },
    //打开弹窗
    openDialog(type) {
      if (type == 'insert') {
        this.form = {
          sysConfigName: '',
          data: []
        }
        this.InsertDialogFormVisible = true
      } else if (type == 'update') {
        this.UpdateDialogFormVisible = true
      }
    },
    //新增系统配置
    insertSysConfig() {
      let data = this.form.data
      let _this = this
      let sysConfigContent = {}
      if (data.length == 0) {
        this.$message({
          message: '请添加配置项',
          type: 'error'
        });
        return
      }
      data.forEach((item, index) => {
        _this.$set(sysConfigContent, data[index].key, data[index].value)
      })
      this.$axios({
        url: this.$api.InsertSysConfig,
        method: 'post',
        params: {
          sysConfigName: this.form.sysConfigName,
          sysConfigContent: JSON.stringify(sysConfigContent)
        }
      }).then(res => {
        this.$notify({
          title: '成功',
          message: '系统配置添加成功',
          type: 'success'
        });
        this.load()
        this.InsertDialogFormVisible = false
      })
    },
    //获取所有配置项
    getSysConfigDetails(sysConfigId) {
      this.$axios({
        url: this.$api.FindSysConfigDetails,
        method: 'get',
        params: {
          sysConfigId: sysConfigId
        }
      }).then(res => {
        this.openDialog('update')
        let _this = this
        this.form = {
          sysConfigId: '',
          sysConfigName: '',
          data: []
        }
        let sysConfigContent = []
        this.form.sysConfigId = res.data[0].sysConfigId
        this.form.sysConfigName = res.data[0].sysConfigName
        sysConfigContent.push(JSON.parse(res.data[0].sysConfigContent))
        sysConfigContent.forEach((item, index) => {
          for (const key in item) {
            _this.form.data.push({
              "key": key,
              "value": item[key]
            })
          }
        })
      })
    },
    //修改配置项
    updateSysConfig() {
      this.$confirm('此操作将修改此配置项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = this.form.data
        let _this = this
        let sysConfigContent = {}
        if (data.length == 0) {
          this.$message({
            message: '请添加配置项',
            type: 'error'
          });
          return
        }
        data.forEach((item, index) => {
          _this.$set(sysConfigContent, data[index].key, data[index].value)
        })
        this.$axios({
          url: this.$api.UpdateSysConfig,
          method: 'put',
          params: {
            sysConfigId: this.form.sysConfigId,
            sysConfigName: this.form.sysConfigName,
            sysConfigContent: JSON.stringify(sysConfigContent)
          }
        }).then(res => {
          this.$notify({
            title: '成功',
            message: '配置项修改成功',
            type: 'success'
          });
          this.load()
          this.UpdateDialogFormVisible = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    FindSysConfigCount() {
      this.$axios({
        url: this.$api.FindSysConfigCount,
        method: 'get'
      }).then(res => {
        this.SysConfigCount = res.data

      })
    },
    FindSysConfigNormalCount() {
      this.$axios({
        url: this.$api.FindSysConfigNormalCount,
        method: 'get'
      }).then(res => {
        this.SysConfigNormalCount = res.data
      })
    },
  },
}
</script>

<style scoped>

</style>